<style lang="scss" scoped>
	.green {
		color: green;
	}
	
	.red {
		color: red;
	}
	
	.blue {
		color: #4b5eeb;
	}
.top {
  height: 200rpx;
  position: relative;
  .background {
    background-color: #5199ff;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    position: absolute;
    height: 180rpx;
    width: 100%;
  }
}
.user-card {
  height: 170rpx;
  padding: 0 15px;
  .card {
    position: relative;
    bottom: 62px;
    height: 370rpx;
    color: white;
    border-radius: 5px;
	padding-top:50rpx;
	background: radial-gradient(circle, #528EFB, #83AFFE);
    .top {
      height: 30%;
      position: relative;
      .userImage {
        position: absolute;
        bottom: 24%;
        left: 10%;
        width: 150rpx;
        height: 150rpx;
        overflow: hidden;
        border-radius: 50%;
        border: 2px solid white;
      }
    }
    .bottom {
      display: flex;
      height: 43%;
      .left {
        width: 100%;
        height: 100%;
        position: relative;
        .user-text {
          width: 100%;
          font-size: 1.6em;
          padding-left: 80rpx;
          height: 50%;
        }
        .user-phone {
          color: white;
          padding-left: 80rpx;
          height: 50%;
          width: 100%;
          font-size: 0.9em;
        }
      }
      .right {
        width: 23%;
        height: 37%;
      }
    }
  }
}

.quit{
  height: 100rpx;
  margin-top: 50px;
  .btn{
    background-color: #4f99ff;
    border-radius: 30px;
    width: 80%;
    color: white;
    font-size: 1.2em;
    height: 100%;
  }
}
.flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}

.order {
		width: 100%;
		// height: 200rpx;
		border-radius: 30rpx;
		background-color: #ffffff;
		padding: 15rpx;
		box-sizing: border-box;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		margin-bottom: 25rpx;
		margin-top:45rpx;

		.order-number {
			width: 100%;
			color: #4f99ff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #f3f3f3;
			padding-bottom: 20rpx;

			.number-left {
				display: flex;
				align-items: center;
				font-weight: bold;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 15rpx;
				}

				text {
					font-size: 30rpx;
					letter-spacing: 3rpx;
					margin-left : 45rpx;
				}
			}

			.number-right {
				font-size: 26rpx;
				font-weight: bold;
				letter-spacing: 3rpx;
				padding-right: 5rpx;
				box-sizing: border-box;
			}

		}

		.order-item {
			width: 100%;
			display: flex;
			align-items: center;
			height: 50rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 15rpx;
			}

			text {
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.8);
			}
		}

		.order-bom {
			width: 100%;
			height: 60rpx;
			background-color: #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.order-bom-left {
				color: rgba(0, 0, 0, 0.5);
				font-size: 24rpx;
				padding-left: 40rpx;
				box-sizing: border-box;
			}

			.order-bom-right {
				// width: 200rpx;
				height: 100%;
				display: flex;
				color: #ffffff;
				font-size: 26rpx;

				.box1 {
					height: 100%;
					line-height: 60rpx;
					background-color: #e5a84a;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box2 {
					height: 100%;
					line-height: 60rpx;
					background-color: #56caa3;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box3 {
					height: 100%;
					line-height: 60rpx;
					background-color: #526afc;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					// margin-right: 10rpx;
				}
			}
		}
	}
</style>
<template>
  <view class="page">
    <view class="top">
      <view class="background"></view>
    </view>
    <view class="user-card">
      <view class="card">
        <view class="bottom">
          <view class="left">
            <view class="user-text" >
				{{username}}
            </view>
			<view class="user-phone"> 卡号：{{card_no}} </view>
            <view class="user-phone"> 开户银行：{{bank_name}} </view>
			<view class="user-phone"> 支行名称：{{bank_open}} </view>
			
          </view>
        </view>
      </view>
    </view>
	<view style="margin-top: 160rpx;text-align: center;">
		<text style="font-size: 48rpx;font-weight: 500;color: #5199ff;">申请记录</text>
		<view class="order" v-for="(item,index) in update_bank_list" :key="index">
			<view class="order-number">
				<view class="number-left">
				<!-- 	<image
						src="/uni_modules/yt-order-list/static/number.png"
						mode="widthFix"></image> -->
					<text>{{ item.bank_no }}</text>
				</view>
				<view class="number-right" :class="item.status == 1 ? 'green':item.status == 2?'red':'blue'">
					{{ item.status_text }}
				</view>
			</view>
			<view class="order-item">
				<image
					src="/uni_modules/yt-order-list/static/bank.png"
					mode="widthFix"></image>
				<text>开户银行：</text>
				<text>{{ item.bank_name }}</text>
			</view>
			<view class="order-item">
				<image
					src="/uni_modules/yt-order-list/static/addrer.png"
					mode="widthFix"></image>
				<text>支行名称：</text>
				<text>{{ item.bank_opening }}</text>
			</view>
			<view class="order-item">
				<image
					src="/uni_modules/yt-order-list/static/note.png"
					mode="widthFix"></image>
				<text>审核备注：</text>
				<text>{{ item.note }}</text>
			</view>
			<view class="order-item">
				<image
					src="/uni_modules/yt-order-list/static/time.png"
					mode="widthFix"></image>
				<text>提交时间：</text>
				<text>{{ item.createtime }}</text>
			</view>
		</view>
	</view>
 
<!-- 	 <u-button  v-if="  contract_status == 'FINISH' && attach_time != null && no_apply == 0"  type="primary" text="申请修改银行卡" customStyle="margin-top: 50px;width:80%;position: fixed;bottom: 350rpx;right: 75rpx;" @click="applyUpdateBank"></u-button> -->
	 <u-button  v-if="  contract_status == 'FINISH' && attach_time != null && card_no != '' && no_apply == 0"  type="primary" text="申请修改银行卡" customStyle="margin-top: 50px;width:80%;position: fixed;bottom: 350rpx;right: 75rpx;" @click="applyUpdateBank"></u-button>
	 <zero-loading v-if="loading == true" type="gear" mask="true" maskOpacity="0.3"></zero-loading>
	 <yfx-tooltip ref="tooltip"></yfx-tooltip>
	 
  </view>
</template>

 
<script>
//import {  } from "@/common/api/{$}.js";
	import telTest from'@/components/ben-components/tel/tel-test.vue'

export default {
	components: {
		telTest
	},
  data() {
    return {
		loading  : false,
		username    : '',
		status_text : '',
		contract_status : '',
		attach_time : null,
		card_no   : '',
		bank_name : '',
		bank_open : '',
		no_apply  : 0,
		update_bank_list : []
	};
  },
  //监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
  onInit() {
	   this.getUserInfo();	
  },
  //监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
  onLoad() {
	   this.getUpdateBankRecord();
	// this.userLogin();
  },
  //监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  //监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
  onShow() {
	   this.getUserInfo();	
	   this.getUpdateBankRecord();
  },
  //页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
  onReachBottom() {},
  onShareAppMessage(res) {},
  created() {},
  methods: {
	  applyUpdateBank(){
	  	uni.navigateTo({
	  		url:'/pages/index/apply-update-bank'
	  	})
	  },
	  getUpdateBankRecord(){
	  	try {
	  		let param = { };
	  		this.$http.getUpdateBankList(param).then(res => {
	  			if (res.code == 1 && res.data) {
	  				let arr = res.data.list;
					this.no_apply = res.data.no_apply;
	  				this.update_bank_list = arr || []
	  			}else{
	  				uni.removeStorageSync('mobile');
	  			}
	  		});
	  	} catch (e) {
	  		console.log("e: ", e);
	  	}
	  },
	  getUserInfo() {
	  	let param = {};
	  	this.$http.getUser(param).then(res => {
	  		if (res.code == 1 && res.data) {
				this.username    = res.data.c_name;
				this.status_text = res.data.status_text;
				this.contract_status = res.data.status;
				this.card_no    = res.data.bank_card_no;
				this.bank_open    = res.data.bank_opening;
				this.bank_name    = res.data.bank_text;
				this.attach_time  = res.data.attach_time;
	  		}else{
				uni.removeStorageSync('mobile');
				this.username           = '';
				this.contract_status    = '';
				this.status_text        = '';
				this.card_no            = '';
				this.bank_open          = '';
				this.bank_name          = '';
				this.attach_time        = null;
			}
	  	});
	  }
  },
};
</script>
